<template>
	<view class="category-box">
		<view v-for="(item,index) in categoryList.slice(0,7)" :key="index">
			{{item.name}}
		</view>
		<view>
			全部分类
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			categoryList: {
				type: Array,
				default: () => [{
					id: 1,
					name: 'Java'
				}, {
					id: 2,
					name: '前端'
				}, {
					id: 3,
					name: '运维'
				}, {
					id: 4,
					name: '设计'
				}, {
					id: 5,
					name: 'PHP'
				}, {
					id: 6,
					name: 'Vue.js'
				}, {
					id: 7,
					name: 'Python'
				}, {
					id: 8,
					name: 'C++'
				}]
			}
		}
	}
</script>

<style lang="scss">
	.category-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 20rpx 30rpx 0 30rpx;

		>view {
			width: 160rpx;
			height: 70rpx;
			background-color: $mxg-color-grey;
			margin-top: 15rpx;
			line-height: 70rpx;
			text-align: center;
			// 文字超出宽度隐藏
			overflow: hidden;
			border-radius: 20rpx;
			font-size: 26rpx;
		}
	}
</style>
